<template>
  <div class="hzs-wallpaper">
    <ul>
      <li v-for="item in wallPaperList.records" :key="item.id">
<!--        <img :src="item.imageUrl" :alt="item.title">-->
        <img v-img-lazy="item.imageUrl">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // name: "index"
  data() {
    return {
      picList: []
    }
  },

  async asyncData({params, app}) {
    // 查询文章详情
    const {data: wallPaperList} = await app.$getWallPaperList()
    console.log(wallPaperList)
    return {wallPaperList}
  },

  // 获取数据(标签名，当前页码)
  async fetchData(paneName, current) {
    // 分页对象
    this.page.current = current

    // 请求接口响应对象
    let response = null
    switch (paneName) {
      case 'hot':
        // 查询热门
        response = await this.$getHotList(this.page)
        break;
      case 'new':
        // 查询最新
        response = await this.$getNewList(this.page)
        break;
      case 'wait':
        // 查询等待，0条回复数
        response = await this.$getWaitList(this.page)
        break;
    }
    // 响应成功
    if (response && response.code === 20000) {
      // 总记录数
      this.page.total = response.data.total

      // 列表数据
      this.listData = response.data.records
    }
  }

}
</script>

<style>
.hzs-wallpaper {
  min-height: 500px;
  background-color: #FFFFFF;
  border-radius: 25px;
  padding: 20px;
  margin-bottom: 100px;
}
</style>
